import React from "react";
import { Map, List, Seq, fromJS, Range } from "immutable";

const App = () => {
  // 创建immutable对象
  // const map1 = Map({
  //   a: 3,
  //   b: 4,
  // });
  // toJS,将immutable对象转成js对象，开发的时候不要用,调试的时候用
  // console.log(map1.toJS());

  // 获取对象的值 get
  // console.log(map1.get("a"));

  // 修改immutable对象 set
  // const map2 = map1.set("a", 3);
  // console.log(map2);
  // console.log(map1 === map2); // false

  // 直接引用同一个对象生成的两个immutable对象的地址是不相同的
  // const obj = {
  //   a: 3,
  //   b: 4,
  // };
  // const map1 = Map(obj);
  // const map2 = Map(obj);
  // console.log(map1 === map2);
  // equals方法比较的是里面的值
  // console.log(map1.equals(map2));

  // 创建immutable数组
  // const list1 = List([1, 2]);
  // const list2 = list1.push(3, 4, 5); // 1,2,3,4,5
  // const list3 = list2.unshift(0); // 0,1,2,3,4,5
  // const list4 = list1.concat(list2, list3); // 1,2,1,2,3,4,5,0,1,2,3,4,5
  // console.log(list4.toJS());
  // size表示数组长度
  // console.log(list1.size);

  // immutable可以适用map做遍历
  // const alpha = Map({ a: 1, b: 2, c: 3, d: 4 });
  // const upperCase = alpha.map((v, k) => k.toUpperCase()).join();
  // console.log(upperCase);

  // immutable对象的合并可以适用merge或者mergeDeep
  // const map1 = Map({
  //   a: 3,
  //   b: 4,
  //   w: {
  //     x: 10,
  //     y: 20,
  //   },
  // });
  // const map2 = Map({
  //   c: 5,
  //   d: 6,
  //   b: 7,
  //   w: {
  //     y: 30,
  //     z: 40,
  //   },
  // });
  // const map3 = map1.merge(map2);
  // const map3 = map1.mergeDeep(map2);
  // console.log(map3);

  // immutable对象可以合并普通对象
  // const map1 = Map({
  //   a: 3,
  //   b: 4,
  // });
  // console.log(map1.merge({ c: 5 }));

  // immutable数组合并适用concat方法
  // const list1 = List([1, 2, 3]);
  // const list2 = List([4, 5, 6]);
  // console.log(list1.concat(list2));
  // console.log(list1.concat(99));
  // console.log([8, 9].concat(list1));

  // Seq既可以创建对象，也可以创建数组
  // const map1 = Seq({ a: 3 });
  // const list1 = Seq([1, 2, 3]);
  // console.log(map1);
  // console.log(list1);
  // Seq是有惰性的
  // const oddSquares = Seq([1, 2, 3, 4, 5, 6, 7, 8])
  //   .filter((x) => {
  //     console.log("filter x:" + x);
  //     return x % 2 !== 0;
  //   })
  //   .map((x) => {
  //     console.log("map x:" + x);
  //     return x * x;
  //   });
  // // [1,9,25,49]
  // console.log(oddSquares.get(1));

  // fromJS也可以定义数组和对象
  // 深度创建map对象
  // const map1 = fromJS({
  //   a: 3,
  //   b: 4,
  //   c: {
  //     x: 10,
  //     y: 20,
  //   },
  // });
  // console.log(map1);

  // const deep = Map({ a: 1, b: 2, c: List([3, 4, 5]) });
  // console.log(deep.toObject());
  // console.log(deep.toArray());
  // console.log(deep.toJS());
  // console.log(JSON.stringify(deep));

  // const aList = List([1, 2, 3]);
  // const anArray = [0, ...aList, 4, 5];
  // console.log(anArray);

  // const nested = fromJS({ a: { b: { c: [3, 4, 5] } } });
  // const nested2 = nested.mergeDeep({ a: { b: { d: 6 } } });
  // // {a: {b: {c: [3,4,5], d: 6}}}
  // // 接收一个数组参数
  // console.log(nested2.getIn(["a", "b", "d"]));
  // // setIn有两个参数，分别是数组和要改成的值
  // const nested3 = nested2.setIn(["a", "b", "d"], 9);
  // console.log(nested3.toJS());
  // // updateIn有两个参数，分别是数组和函数，函数又可以接收一个参数，就是查到的值
  // const nested4 = nested2.updateIn(["a", "b", "d"], (v) => v * 2);
  // console.log(nested4.toJS());

  const aRange = Range(1, Infinity)
    .skip(1000)
    .map((n) => -n)
    .filter((n) => n % 2 === 0)
    .take(2)
    .reduce((r, n) => r * n, 1);

  console.log(aRange);

  return (
    <>
      <h3>immutable</h3>
      <input type="range" />
    </>
  );
};

export default App;
